<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>涟漪特效</title>
    <link rel="stylesheet" type="text/css" href="botten_css.css">
   

</head>
<body>
   
    <a href="#" class = "s1">Button1</a>
    <a href="#" class = 's1'>Button2</a>
    <a href="#">没有被选择器选中</a>
    
    <!-- 获取鼠标位置,在该位置处生成<span> -->
    <script type="text/javascript">
        //此JS效果只应用与在此代码块之前的选中元素
        //选择文档中所有的s1类
        const buttons = document.querySelectorAll('.s1');
        buttons.forEach(btn=>{

            btn.addEventListener('click',function(e){
        
                let x = e.clientX - e.target.offsetLeft;
                let y = e.clientY - e.target.offsetTop;

                let ripples = document.createElement('span');
                ripples.style.left = x +'px';
                ripples.style.top = y +'px';
                this.appendChild(ripples);
                
                // 片刻移除
                setTimeout(()=>{
                    ripples.remove()
                },1000);
            })
        }
        
        )
    </script>
    
</body>
</html>